Ben的學習網

系統功能

[Ben的學習網] 網頁包含標題欄，側邊，課程內容
1. 標題欄包含 Logo，標題，搜尋列, 使用者
	a. Logo 是自己設計的 Logo
	b. 標題就是「Ben的學習網」 
	c. 搜尋列可依闗鍵字過濾出只含有闗鍵字的課程名稱及章節
	d. 使用者放登入者的頭像，目前沒有做使用者登入功能，所以放個小孩的圖片。
2. 側邊欄包含主題課程，版權標記
	a. 主題課程包含中文，英語，日語，韓語，英日韓，其他，可用滑鼠點選，會以藍色背景呈現。
	b. 版權標記2022年時創立此網頁
3. 課程內容包含課程大分類，課程名稱，課程章節
	a. 課程大分類隨不同主題課程分類，點選後會出現不同課程名稱，會以粉紅色背景呈現。
	b. 課程名稱列出不同課程，若是課程分類隸屬影片，點選後進入課程簡表。
	c. 課程章節則列出課程內容，點選後進入此課程。

技術手法

系統網頁架構如上，整體網頁是一個大容器（Container）, 包含
限定最大的寛度 (max-width)，如果超過寬度，也不要佔滿整個網頁
設定 margin 上下留 2rem, 左右 auto, 則可以達到上面留白，水平置中的效果
設定背景是亮灰色，使用了 SCSS 的寫法
box-shadow: 讓 Container 有陰影的效果（充滿立體美感）
min-height: 要有一定的高度

.container {
max-width: 120rem;
margin: 2rem auto;
background-color: var(--color-grey-light-1);
box-shadow: var(--shadow-dark);
min-height: 50rem;
}

Header 設定字體大小，高度，顯示方式

.header {
font-size: 1.4rem;
height: 7rem;
background-color: #fff;
border-bottom: var(--line);
display: flex;
justify-content: space-between;
align-items: center;
}

語文學習02-家人與朋友

1. 你家裡有幾個人？我家中有4個人
2. 這個人是誰？他是我弟弟
3. 他長得如何？他長得很高很帥
4. 他個性如何？他聰明又風趣
5. 〖單字〗家人
6. 〖單字〗外表
7. 〖單字〗個性